
<template>
	<view class="category-pages" :class="themeName" :style="[pageStyle]">
		<view v-for="(item, index) in pagesData" :key="index" :class="[item.name]">
			<template v-if="item.name=='search'">
				<w-search v-show="item.show" :content="item.content" :styles="item.styles" />
			</template>
			<template v-if="item.name=='category'">
				<w-category class="category" v-show="item.show" :content="item.content" :styles="item.styles" :height="height" />
			</template>
		</view>
		<view class="tabbar">
			<tabbar />
		</view>
	</view>
</template>


<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGetPage
	} from '@/api/store'
	import {
		apiGoodsCategory,
		apiGoodsLists
	} from '@/api/goods'
	import {
		getRect
	} from '@/utils/tools'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				styles: {},
				pagesData: [],
				height: 0,
				goodsList: []
			}
		},
		onLoad() {
			apiGetPage({
				type: 2
			}).then(res => {
				const {
					common: {
						title
					},
					common,
					content
				} = res

				uni.setNavigationBarTitle({
					title
				});
				this.styles = common
				console.log(content.data)
				this.pagesData = content
				this.$nextTick(() => {
					this.getHeight()
				})
			})
		},
		computed: {
			pageStyle() {
				const {
					background_color,
					background_image,
					background_type,
				} = this.styles
				if (background_type == 0 || !background_image || !background_color) {
					return
				} 
				const style = background_type == 1 ? {
					'background-color': background_color
				}: {
					'background-image': `url(${background_image})`
				}
				return style
			}
		},
		methods: {
			async getHeight() {
				const category = await getRect('.category')
				this.height = category.height
			},
			upCallback(page) {
				const pageNum = page.num
				const pageSize = page.size
			
				apiGoodsLists({
					page_no: pageNum,
					page_size: pageSize,
				}).then(({
					lists,
					page_size,
					count,
				}) => {
					// 如果是第一页需手动置空列表
					if (page.num == 1) this.goodsList = []
					// 重置列表数据
					this.goodsList = [...this.goodsList, ...lists]
					this.mescroll.endBySize(page_size, count)
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
		} // 使用mixin (在main.js注册全局组件)
	}
</script>


<style lang="scss">
	/*根元素需要有固定的高度*/
	page {
		height: 100%;
		box-sizing: border-box;
		// 支付宝小程序,钉钉小程序需添加绝对定位,否则height:100%失效: https://opendocs.alipay.com/mini/framework/acss#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98
		/* #ifdef MP-ALIPAY || MP-DINGTALK*/
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		/* #endif */
		/*需给父元素设置height:100%*/
		.category-pages {
			height: 100%;
			display: flex;
			flex-direction: column;
			background-repeat: no-repeat;
			background-size: 100% auto;

			/* 中间 */
			.category {
				flex: 1;
				min-width: 0;
				min-height: 0;
				/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
				display: flex;
				flex-direction: column;
			}

		}
	}
</style>
